 <template>
    <div>
        <div id="cesiumContainer"></div>
    </div>
</template>

<script>
import {Viewer,Cartesian3,Color,Cartesian2,
  CheckerboardMaterialProperty,
  StripeMaterialProperty,
  PolylineOutlineMaterialProperty,
  PolylineGlowMaterialProperty,
  GridMaterialProperty,
  HeadingPitchRange,
  Math
} from 'cesium/Cesium';


export default {
    name: "App",
    data(){
      return {
        viewer:{}
      }
    },
    mounted() {
        this.viewer = new Viewer('cesiumContainer');
        this.addMian()
        // this.addTouming()
        // this.addLine()
    },
    methods:{
      addMian(){
        let wyoming = this.viewer.entities.add({
          name : 'Wyoming',
          polygon : {
            hierarchy : Cartesian3.fromDegreesArray([
              -109.080842,45.002073,
              -105.91517,45.002073,
              -104.058488,44.996596,
              -104.053011,43.002989,
              -104.053011,41.003906,
              -105.728954,40.998429,
              -107.919731,41.003906,
              -109.04798,40.998429,
              -111.047063,40.998429,
              -111.047063,42.000709,
              -111.047063,44.476286,
              -111.05254,45.002073]),
            height : 0,
            material : Color.RED.withAlpha(0.5),
            outline : true,
            outlineColor : Color.BLACK
          }
        });
        wyoming.polygon.height = 200000;
        wyoming.polygon.extrudedHeight = 250000;
        wyoming.description = '\
        <img\
          width="50%"\
          style="float:left; margin: 0 1em 1em 0;"\
          src="//cesiumjs.org/tutorials/Visualizing-Spatial-Data/images/Flag_of_Wyoming.svg"/>\
        <p>\
          Wyoming is a state in the mountain region of the Western \
          United States.\
        </p>\
        <p>\
          Wyoming is the 10th most extensive, but the least populous \
          and the second least densely populated of the 50 United \
          States. The western two thirds of the state is covered mostly \
          with the mountain ranges and rangelands in the foothills of \
          the eastern Rocky Mountains, while the eastern third of the \
          state is high elevation prairie known as the High Plains. \
          Cheyenne is the capital and the most populous city in Wyoming, \
          with a population estimate of 62,448 in 2013.\
        </p>\
        <p>\
          Source: \
          <a style="color: WHITE"\
            target="_blank"\
            href="http://en.wikipedia.org/wiki/Wyoming">Wikpedia</a>\
        </p>';
        var heading = Math.toRadians(90);
        var pitch = Math.toRadians(-30);
        // this.viewer.zoomTo(wyoming,new HeadingPitchRange(heading, pitch));


        wyoming.position = Cartesian3.fromDegrees(-107.724, 42.68);
        this.viewer.trackedEntity = wyoming;

        this.viewer.flyTo(wyoming).then((result)=>{
          if (result) {
            this.viewer.selectedEntity = wyoming;
          }
        });
      },
      addTouming(){
        let entity = this.viewer.entities.add({
          position: Cartesian3.fromDegrees(-103.0, 40.0),
          ellipse : {
            semiMinorAxis : 250000.0,
            semiMajorAxis : 400000.0,
            material : Color.BLUE.withAlpha(0.5)
          }
        });
        let ellipse = entity.ellipse;
        // ellipse.material=new CheckerboardMaterialProperty({
        //   evenColor : Color.WHITE,
        //   oddColor : Color.BLACK,
        //   repeat : new Cartesian2(4, 4)
        // });

        // ellipse.material = new StripeMaterialProperty({
        //   evenColor : Color.WHITE,
        //   oddColor : Color.BLACK,
        //   repeat : 32
        // });

        ellipse.material = new GridMaterialProperty({
          color : Color.YELLOW,
          cellAlpha : 0.2,
          lineCount : new Cartesian2(8, 8),
          lineThickness : new Cartesian2(2.0, 2.0)
        });

        ellipse.fill = false;
        ellipse.outline = true;
        ellipse.outlineColor = Color.YELLOW;
        ellipse.outlineWidth = 2.0;

        this.viewer.zoomTo(entity);
      },
      addLine(){
        let entity = this.viewer.entities.add({
            polyline : {
              positions : Cartesian3.fromDegreesArray([-77, 35, -77.1, 35]),
            width : 5,
            material : Color.RED
        }});
        this.viewer.zoomTo(entity);
        var polyline = entity.polyline // For upcoming examples
        // polyline.material = new PolylineOutlineMaterialProperty({
        //   color : Color.ORANGE,
        //   outlineWidth : 3,
        //   outlineColor : Color.BLACK
        // });
        polyline.material = new PolylineGlowMaterialProperty({
          glowPower : 0.2,
          color : Color.BLUE,
        });
      }
    }

};
</script>
<style>
#cesiumContainer {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    width: 100%;
    height:100vh;
    overflow: hidden;
}
</style>
